<template>
  <div style="background: #757575;height: 100%">
    <div class="customer-service">
      <P style="font-size: 18px;text-align: center;height: 40px;padding: 5px;line-height: 40px;">{{to}}</P>
      <div class="customer-service-body" ref="service">
        <div v-for="item in msgList">

          <div class="service-msg" v-if="item.username==to">
            <div style="flex: 1">
              <img class="icon-img"
                   src="https://cnbj0.fds.api.xiaomi.com/b2c-kfs-media/png220127-b2761e59775e64e0f1fed476effc7daf.png"
                   width="40px">
            </div>
            <div class="chatinfo"><p>{{item.msg}}</p></div>
          </div>

          <div class="customer-msg" v-if="item.username==username">
            <div class="chatinfo-customer"><p>{{item.msg}}</p></div>
            <div style="flex: 1">
              <img class="icon-img"
                   src="https://cnbj0.fds.api.xiaomi.com/b2c-kfs-media/png220127-b2761e59775e64e0f1fed476effc7daf.png"
                   width="40px">
            </div>
          </div>
        </div>

      </div>
      <div class="customer-service-btoom">
        <el-row style="padding: 0px 10px">
          <el-col :span="18">

            <el-input v-model="msg" placeholder="我想问...." @change="put"></el-input>
          </el-col>
          <el-col :span="6">
            <div class="icon">
              <img width="30px"
                   src="">
            </div>
            <div class="icon">
              <img width="30px"
                   src="">
            </div>

          </el-col>
        </el-row>

      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "customerService",
    data() {
      return {
        username: "",
        to: sessionStorage.getItem("username"),
        msg: "",
        path: "ws://192.168.43.126:8081/webSocket/lmg",
        socket: "",
        msgList: [
          {
            name: "kf", msg: "请问有什么可以帮你"
          },
          {
            name: "kf", msg: "请问有什么可以帮你1"
          },
          {
            name: "lmg", msg: "介绍一下产品"
          },
          {
            name: "lmg", msg: "产品的优点"
          }

        ]
      }

    },
    mounted() {
      this.username = this.$route.query.serviceNo
      this.initData()
      this.connectWebsocket()
    },
    destroyed() {
      this.socket.close()
    },
    methods: {
      scroller() {
        this.$nextTick(() => {
          this.$refs.service.scrollTop = this.$refs.service.scrollHeight;
        });

      },
      put(value) {
        this.msg = ""
        let msgBody = {
          username: this.username,
          to: this.to,
          identity: "service",
          msg: value,
        }

        this.msgList.push(msgBody)
        this.socket.send(JSON.stringify(msgBody))
        this.scroller()

      },
      initData() {
        this.$axios.post('/message', {
          username: this.username,
          to: this.to,
          identity: 'service',
          msg: "323"
        }).then((res) => {
          this.msgList = res
          this.scroller()
          console.log(this.msgList)
        })

      },
      connectWebsocket() {
        if (typeof (WebSocket) === "undefined") {
          alert("您的浏览器不支持socket")
        } else {
          // 实例化socket
          this.socket = new WebSocket('ws://192.168.55.74:8081/webSocket/' + this.username)
          // 监听socket连接
          this.socket.onopen = this.open
          // 监听socket错误信息
          this.socket.onerror = this.error
          // 监听socket消息
          this.socket.onmessage = this.getMessage
        }
      },
      open: function () {
        console.log("socket连接成功")
      },
      error: function () {
        console.log("连接错误")
      },
      getMessage: function (msgb) {
        console.log(msgb)
        let msgBody = {
          username: this.to,
          msg: msgb.data,
          to: this.username
        }
        this.msgList.push(msgBody)
        this.scroller()
      },
      send: function () {
        this.socket.send(params)
      },
      close: function () {
        console.log("socket已经关闭")
      }

    }

  }
</script>

<style scoped>
  .customer-service {
    width: 400px;

    margin: 0 auto;
    height: 100%;
    background: #eeeeee;
  }

  .customer-service-body {
    height: 85%;
    overflow: scroll;
    overflow-x: hidden;
  }

  .customer-service-btoom {
    height: 15%;
  }

  .service-msg {
    display: flex;
    align-items: center;
    padding: 10px;
  }

  .customer-msg {
    display: flex;
    align-items: center;
    padding: 10px;
  }

  .icon-img {
    margin-left: 20px;
  }

  .chatinfo {
    flex: 4;

    min-height: 30px;
    padding: 5px;
  }

  .chatinfo-customer {
    flex: 4;
    min-height: 30px;
    padding: 5px;
  }

  .chatinfo-customer p {
    background: rgb(253, 224, 131);
    white-space: inherit;
    text-overflow: ellipsis;
    display: inline-block;
    padding: 5px 10px;
    float: right;
    line-height: 30px;
    border-radius: 10px;
    word-break: break-all;
  }

  .chatinfo p {
    background: #ffffff;
    white-space: inherit;
    text-overflow: ellipsis;
    display: inline-block;
    padding: 5px 10px;
    line-height: 30px;
    border-radius: 10px;
    word-break: break-all;

  }

  .icon {
    width: 50%;
    float: left;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

</style>
